<template>
  <div id="app">
    <Head>浏览记录</Head>
    <van-list
      class="list"
      v-model="loading"
      :finished="finished"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="false"
      v-if="show_empty != true"
    >
      <div class="info" v-for="(item, index) in list" :key="index">
        <div class="date" v-if="index==0">{{item.viewdate}}</div>
        <div class="date" v-if="index!=0 && item.viewdate!=list[index-1].viewdate">{{item.viewdate}}</div>
        <div class="item">
          <div class="title">{{item.article.title}}</div>
          <div class="centen">{{item.article.desc}}</div>
          <div class="imgs">
            <div v-for="(itemtwo, indextwo) in item.article.img_arr" :key="indextwo" class="img">
              <img v-if="indextwo<4" :src="itemtwo"/>
            </div>
            <div v-if="item.article.img_arr.length>4" class="imgnum">共{{item.article.img_arr.length}}张图片</div>
          </div>
          <div class="bottom">
            <div class="btndiv">
              <div class="btn" @click="jump(item)">查看详情</div>
              <div class="btn" @click="ondelete(item.id)">删除</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'

export default {
  components: {
  },
  data () {
    return {
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      show_empty: false,
      params: {
      },
      list: []
    }
  },
  created () {
    this.fetchData(true)
  },
  methods: {
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      this.loading = true
      http
        .get(api.city_footprint, conditions)
        .then((res) => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    jump (val) {
      this.$router.push('/cityinfo/info/' + val.article.id)
    },
    // 删除
    ondelete (id) {
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定要删除吗?'
        })
        .then(() => {
          const param = {
            id: id
          }
          http
            .get(api.city_footprint_del, param)
            .then(res => {
              if (parseInt(res.code) === 200) {
                this.$notify({ type: 'success', message: res.message })
                this.fetchData(true)
              } else {
                this.$notify(res.message)
              }
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.list{
  height: calc(100vh - 53px);
  background-color: #f2f4f3;
  overflow: auto;
  .info{
    .date{
      height: 44px;
      padding-left: 16px;
      background-color: #f2f4f3;
      font-size: 14px;
      color: #222222;
      display: flex;
      align-items: center;
    }
    .item{
      background-color: #ffffff;
      padding: 16px 19px 16px 17px;
      margin-bottom: 7px;
      .title{
        font-size: 16px;
        color: #080509;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .centen{
        margin-top: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 14px;
        color: #333333;
      }
      .imgs{
        margin-top: 12px;
        position: relative;
        display: flex;
        .img,img{
          width: 77px;
          height: 55px;
          margin-right: 11px;
        }
        .imgnum{
          width: 77px;
          height: 55px;
          position: absolute;
          font-size: 11px;
          color: #ffffff;
          right: -2px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0,0,0,0.6);
        }
      }
      .bottom{
        margin-top: 17px;
        height: 27px;
        position: relative;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999999;
        .btndiv{
          height: 27px;
          position: absolute;
          right: 0;
          display: flex;
          .btn{
            padding: 4px 18px;
            margin-left: 6px;
            border-radius: 50px;
            border: 1px solid #d8d8d8;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #333333;
          }
        }
      }
    }
  }
}
.list::-webkit-scrollbar{
    display: none;
}
</style>
